<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pe="http://primefaces.org/ui/extensions">
    <ui:composition template="/view/templates/layout.xhtml">
        <ui:define name="title">Registro</ui:define>
        <ui:define name="menu">
            <ui:include src="/view/templates/smp-menu.xhtml"/>
        </ui:define>
        <ui:define name="body">
            <h:form id="formRegistro" prependId="false">
            <p:growl id="growl" globalOnly="true" showSummary="true" showDetail="true" autoUpdate="true" />
                <div class="row">
                    <div class="col-md-offset-2 col-md-8">
                        <div class="panel panel-primary">
                            <div class="panel-heading">Nuevo Registro</div>
                            <div class="panel-body">
                                <p:panelGrid style="width: 100%">
                                    <p:row>
                                        <p:column>
                                            <p:outputLabel value="#{msg.gr_registrar_Usuario}"/>
                                        </p:column>
                                    </p:row>
                                    <p:row>
                                        <p:column style="width: 20%">
                                            <h:outputText value="#{msg.obj_usuarioNick}"/>
                                        </p:column>
                                        <p:column style="width: 25%">
                                            <p:inputText id="nick" value="#{RegistrarController.medicoCreate.usuario.nick}" style="margin: 5px;" 
                                                         styleClass="#{(RegistrarController.validarUsuario)? 'form-control-error' : 'form-control'}"
                                                         placeholder="#{(RegistrarController.validarUsuario)? msg.gr_registrar_NickUsado : msg.obj_usuarioNick}"
                                                         onfocus="document.getElementById('messageForNick').style.display = 'block';"
                                                         onblur="document.getElementById('messageForNick').style.display = 'none';"
                                                         validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                                <f:validateRegex pattern="[A-Za-z]+"/>
                                                <p:ajax event="blur" listener="#{RegistrarController.executeValidarUsuario}" update="nick" />
                                            </p:inputText>
                                        </p:column>
                                        <p:column>
                                            <p:message for="nick"/>
                                            <div id="messageForNick"  class="message-validation-div">
                                                <h:outputText value="#{msg.gr_datos_letras}"></h:outputText>
                                            </div>
                                        </p:column>
                                    </p:row>
                                    <p:row>
                                        <p:column>
                                            <h:outputText value="#{msg.obj_usuarioPass}"/>
                                        </p:column>
                                        <p:column>
                                            <p:password id="pass" value="#{RegistrarController.medicoCreate.usuario.pass}" style="margin: 5px;" styleClass="form-control"
                                                        placeholder="#{msg.obj_usuarioPass}"
                                                        onfocus="document.getElementById('messageForPass').style.display = 'block';"
                                                        onblur="document.getElementById('messageForPass').style.display = 'none';"
                                                        requiredMessage="#{msg.vld_campoNecesario}" 
                                                        match="passDos"
                                                        required="true">
                                                <f:validateRegex pattern="[A-Za-z0-9]{8,}"/>
                                            </p:password>
                                        </p:column>
                                        <p:column>
                                            <p:message for="pass"/>
                                            <div id="messageForPass" class="message-validation-div">
                                                <h:outputText value="#{msg.gr_datos_alfanumericos}"></h:outputText>
                                            </div>
                                        </p:column>
                                    </p:row>
                                    <p:row>
                                        <p:column>
                                            <h:outputText value="#{msg.obj_usuarioRepeatPass}"/>
                                        </p:column>
                                        <p:column>
                                            <p:password id="passDos" value="#{RegistrarController.medicoCreate.usuario.pass}" style="margin: 5px;" styleClass="form-control"
                                                        placeholder="#{msg.obj_usuarioRepeatPass}"
                                                        onfocus="document.getElementById('messageForPassDos').style.display = 'block';"
                                                        onblur="document.getElementById('messageForPassDos').style.display = 'none';"
                                                        validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                                <f:validateRegex pattern="[A-Za-z0-9]+"/>
                                            </p:password>
                                        </p:column>
                                        <p:column>
                                            <p:message for="passDos"/>
                                            <div id="messageForPassDos" class="message-validation-div">
                                            </div>
                                        </p:column>
                                    </p:row>
                                    <p:row>
                                        <p:column>
                                            <p:outputLabel value="#{msg.grn_datos_Nombre}"/>
                                        </p:column>
                                    </p:row>
                                    <p:row>
                                        <p:column>
                                            <h:outputText value="#{msg.obj_personaNombre}"/>
                                        </p:column>
                                        <p:column>
                                            <p:inputText id="nombre" value="#{RegistrarController.medicoCreate.nombre}" style="margin: 5px;" styleClass="form-control"
                                                         placeholder="#{msg.obj_personaNombre}"
                                                         onfocus="document.getElementById('messageForNombre').style.display = 'block';"
                                                         onblur="document.getElementById('messageForNombre').style.display = 'none';"
                                                         validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                                <f:validateRegex pattern="[A-Za-z]+"/>
                                            </p:inputText>
                                        </p:column>
                                        <p:column>
                                            <p:message for="nombre" />
                                            <div id="messageForNombre" class="message-validation-div">
                                                <h:outputText value="#{msg.gr_datos_letras}"></h:outputText>
                                            </div>
                                        </p:column>
                                    </p:row>
                                    <p:row>
                                        <p:column>
                                            <h:outputText value="#{msg.obj_personaApPaterno}"/>
                                        </p:column>
                                        <p:column>
                                            <p:inputText id="apPaterno" value="#{RegistrarController.medicoCreate.apPaterno}" style="margin: 5px;" styleClass="form-control"
                                                         placeholder="#{msg.obj_personaApPaterno}"
                                                         onfocus="document.getElementById('messageForApPaterno').style.display = 'block';"
                                                         onblur="document.getElementById('messageForApPaterno').style.display = 'none';"
                                                         validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                                <f:validateRegex pattern="[A-Za-z]+"/>
                                            </p:inputText>
                                        </p:column>
                                        <p:column>
                                            <p:message for="apPaterno"/>
                                            <div id="messageForApPaterno" class="message-validation-div">
                                                <h:outputText value="#{msg.gr_datos_letras}"></h:outputText>
                                            </div>
                                        </p:column>
                                    </p:row>
                                    <p:row>
                                        <p:column>
                                            <h:outputText value="#{msg.obj_personaApMaterno}"/>
                                        </p:column>
                                        <p:column>
                                            <p:inputText id="apMaterno" value="#{RegistrarController.medicoCreate.apMaterno}" style="margin: 5px;" styleClass="form-control"
                                                         placeholder="#{msg.obj_personaApMaterno}"
                                                         onfocus="document.getElementById('messageForApMaterno').style.display = 'block';"
                                                         onblur="document.getElementById('messageForApMaterno').style.display = 'none';"
                                                         validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                                <f:validateRegex pattern="[A-Za-z]+"/>
                                            </p:inputText>
                                        </p:column>
                                        <p:column>
                                            <p:message for="apMaterno"/>
                                            <div id="messageForApMaterno" class="message-validation-div">
                                                <h:outputText value="#{msg.gr_datos_letras}"></h:outputText>
                                            </div>
                                        </p:column>
                                    </p:row>
                                    <p:row>
                                        <p:column>
                                            <p:outputLabel value="#{msg.grn_datos_gr}"/>
                                        </p:column>
                                    </p:row>
                                    <p:row>
                                        <p:column>
                                            <h:outputText value="#{msg.obj_personaGenero}"/>
                                        </p:column>
                                        <p:column>
                                            <div style="width: 185px;">
                                                <p:selectOneRadio id="genero" value="#{RegistrarController.medicoCreate.genero}"  
                                                                  styleClass="ui-radio-button-custome"
                                                                  validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                                    <f:selectItem itemLabel="#{msg.obj_personaMasculino}" itemValue="1" />    
                                                    <f:selectItem itemLabel="#{msg.obj_personaFemenino}" itemValue="2" />    
                                                </p:selectOneRadio>
                                            </div>
                                        </p:column>
                                        <p:column>                                                
                                            <p:message for="genero"/>
                                            <div id="messageForGenero" class="message-validation-div">
                                                <h:outputText value="#{msg.gr_datos_genero}"></h:outputText>
                                            </div>
                                        </p:column>
                                    </p:row>
                                    <p:row>
                                        <p:column>
                                            <h:outputText value="#{msg.obj_personaCelular}"/>
                                        </p:column>
                                        <p:column>
                                            <p:inputText id="celular" value="#{RegistrarController.medicoCreate.celular}" style="margin: 5px;" styleClass="form-control"
                                                         placeholder="#{msg.obj_personaCelular}"
                                                         onfocus="document.getElementById('messageForCelular').style.display = 'block';"
                                                         onblur="document.getElementById('messageForCelular').style.display = 'none';"
                                                         validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                                <f:validateRegex pattern="[0-9-]+"/>
                                            </p:inputText>
                                        </p:column>
                                        <p:column>
                                            <p:message for="celular"/>
                                            <div id="messageForCelular" class="message-validation-div">
                                                <h:outputText value="#{msg.gr_datos_tel}"></h:outputText>
                                            </div>
                                        </p:column>
                                    </p:row>
                                    <p:row>
                                        <p:column>
                                            <h:outputText value="#{msg.obj_personaTelefono}"/>
                                        </p:column>
                                        <p:column>
                                            <p:inputText id="telefono" value="#{RegistrarController.medicoCreate.telefono}" style="margin: 5px;" styleClass="form-control"
                                                         placeholder="#{msg.obj_personaTelefono}"
                                                         onfocus="document.getElementById('messageForTelefono').style.display = 'block';"
                                                         onblur="document.getElementById('messageForTelefono').style.display = 'none';"
                                                         validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                                <f:validateRegex pattern="[0-9-]+"/>
                                            </p:inputText>
                                        </p:column>
                                        <p:column>
                                            <p:message for="telefono"/>
                                            <div id="messageForTelefono" class="message-validation-div">
                                                <h:outputText value="#{msg.gr_datos_tel}"></h:outputText>
                                            </div>
                                        </p:column>
                                    </p:row>
                                    <p:row>
                                        <p:column>
                                            <h:outputText value="#{msg.obj_personaEmail}"/>
                                        </p:column>
                                        <p:column>
                                            <p:inputText id="email" value="#{RegistrarController.medicoCreate.email}" style="margin: 5px;" styleClass="form-control"
                                                         placeholder="#{msg.obj_personaEmail}"
                                                         onfocus="document.getElementById('messageForEmail').style.display = 'block';"
                                                         onblur="document.getElementById('messageForEmail').style.display = 'none';"
                                                         validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                                <f:validateRegex pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,6}$" />
                                            </p:inputText>
                                        </p:column>
                                        <p:column>
                                            <p:message for="email"/>
                                            <div id="messageForEmail" class="message-validation-div">
                                                <h:outputText value="#{msg.gr_datos_email}"></h:outputText>
                                            </div>
                                        </p:column>
                                    </p:row>
                                    <p:row>
                                        <p:column>
                                            <p:outputLabel value="#{msg.grn_datos_Domicilio}"/>
                                        </p:column>
                                    </p:row>
                                    <p:row>
                                        <p:column>
                                            <h:outputText value="#{msg.obj_personaCiudad}"/>
                                        </p:column>
                                        <p:column>
                                            <p:inputText id="ciudad" value="#{RegistrarController.medicoCreate.ciudad}" style="margin: 5px;" styleClass="form-control"
                                                         placeholder="#{msg.obj_personaCiudad}"
                                                         onfocus="document.getElementById('messageForCiudad').style.display = 'block';"
                                                         onblur="document.getElementById('messageForCiudad').style.display = 'none';"
                                                         validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                                <f:validateRegex pattern="[A-Za-zéó ]+"/>   
                                            </p:inputText>
                                        </p:column>
                                        <p:column>
                                            <p:message for="ciudad"/>
                                            <div id="messageForCiudad" class="message-validation-div">
                                                <h:outputText value="#{msg.gr_datos_letras}"></h:outputText>
                                            </div>
                                        </p:column>
                                    </p:row>
                                    <p:row>
                                        <p:column>
                                            <h:outputText value="#{msg.obj_personaEstado}"/>
                                        </p:column>
                                        <p:column>
                                            <p:selectOneMenu id="estado" value="#{RegistrarController.medicoCreate.estado}"
                                                             requiredMessage="#{msg.vld_campoNecesario}" required="true"
                                                             style="margin-left: 5px !important; width: 280px !important">
                                                <f:selectItem itemLabel="#{msg.grn_selectOption}" itemValue="" />
                                                <f:selectItem itemLabel="Aguascalientes" itemValue="Aguascalientes" />
                                                <f:selectItem itemLabel="Baja California" itemValue="Baja California" />
                                                <f:selectItem itemLabel="Baja California Sur" itemValue="Baja California Sur" />
                                                <f:selectItem itemLabel="Campeche" itemValue="Campeche" />
                                                <f:selectItem itemLabel="Chiapas" itemValue="Chiapas" />
                                                <f:selectItem itemLabel="Chihuahua" itemValue="Chihuahua" />
                                                <f:selectItem itemLabel="Coahuila" itemValue="Coahuila" />
                                                <f:selectItem itemLabel="Colima" itemValue="Colima" />
                                                <f:selectItem itemLabel="Distrito Federal" itemValue="Distrito Federal" />
                                                <f:selectItem itemLabel="Durango" itemValue="Durango" />
                                                <f:selectItem itemLabel="Estado de México" itemValue="Estado de México" />
                                                <f:selectItem itemLabel="Guanajuato" itemValue="Guanajuato" />
                                                <f:selectItem itemLabel="Guerrero" itemValue="Guerrero" />
                                                <f:selectItem itemLabel="Hidalgo" itemValue="Hidalgo" />
                                                <f:selectItem itemLabel="Jalisco" itemValue="Jalisco" />
                                                <f:selectItem itemLabel="Michoacán" itemValue="Michoacán" />
                                                <f:selectItem itemLabel="Morelos" itemValue="Morelos" />
                                                <f:selectItem itemLabel="Nayarit" itemValue="Nayarit" />
                                                <f:selectItem itemLabel="Nuevo León" itemValue="Nuevo León" />
                                                <f:selectItem itemLabel="Oaxaca" itemValue="Oaxaca" />
                                                <f:selectItem itemLabel="Puebla" itemValue="Puebla" />
                                                <f:selectItem itemLabel="Querétaro" itemValue="Querétaro" />
                                                <f:selectItem itemLabel="Quintana Roo" itemValue="Quintana Roo" />
                                                <f:selectItem itemLabel="San Luis Potosí" itemValue="San Luis Potosí" />
                                                <f:selectItem itemLabel="Sinaloa" itemValue="Sinaloa" />
                                                <f:selectItem itemLabel="Sonora" itemValue="Sonora" />
                                                <f:selectItem itemLabel="Tabasco" itemValue="Tabasco" />
                                                <f:selectItem itemLabel="Tamaulipas" itemValue="Tamaulipas" />
                                                <f:selectItem itemLabel="Tlaxcala" itemValue="Tlaxcala" />
                                                <f:selectItem itemLabel="Veracruz" itemValue="Veracruz" />
                                                <f:selectItem itemLabel="Yucatán" itemValue="Yucatán" />
                                                <f:selectItem itemLabel="Zacatecas" itemValue="Zacatecas" />
                                            </p:selectOneMenu>
                                        </p:column>
                                        <p:column>
                                            <p:message for="estado"/>
                                            <div id="messageForEstado" class="message-validation-div">
                                                <h:outputText value="#{msg.gr_datos_letras}"></h:outputText>
                                            </div>
                                        </p:column>
                                    </p:row>
                                    <p:row>
                                        <p:column>
                                            <h:outputText value="#{msg.obj_personaColonia}"/>
                                        </p:column>
                                        <p:column>
                                            <p:inputText id="colonia" value="#{RegistrarController.medicoCreate.colonia}" style="margin: 5px;" styleClass="form-control"
                                                         placeholder="#{msg.obj_personaColonia}"
                                                         onfocus="document.getElementById('messageForColonia').style.display = 'block';"
                                                         onblur="document.getElementById('messageForColonia').style.display = 'none';"
                                                         validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                                <f:validateRegex pattern="[A-Za-z0-9]+"/>
                                            </p:inputText>
                                        </p:column>
                                        <p:column>
                                            <p:message for="colonia"/>
                                            <div id="messageForColonia" class="message-validation-div">
                                                <h:outputText value="#{msg.gr_datos_letras}"></h:outputText>
                                            </div>
                                        </p:column>
                                    </p:row>
                                    <p:row>
                                        <p:column>
                                            <h:outputText value="#{msg.obj_personaCodigoPostal}"/>
                                        </p:column>
                                        <p:column>
                                            <p:inputText id="cp" value="#{RegistrarController.medicoCreate.codigoPostal}" style="margin: 5px;" styleClass="form-control"
                                                         placeholder="#{msg.obj_personaCodigoPostal}"
                                                         onfocus="document.getElementById('messageForCP').style.display = 'block';"
                                                         onblur="document.getElementById('messageForCP').style.display = 'none';"
                                                         validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                                <f:validateRegex pattern="[0-9]{5}"/>
                                            </p:inputText>
                                        </p:column>
                                        <p:column>
                                            <p:message for="cp"/>
                                            <div id="messageForCP" class="message-validation-div">
                                                <h:outputText value="#{msg.gr_datos_cp}"></h:outputText>
                                            </div>
                                        </p:column>
                                    </p:row>
                                    <p:row>
                                        <p:column>
                                            <p:outputLabel value="#{msg.grn_datos_md}"/>
                                        </p:column>
                                    </p:row>
                                    <p:row>
                                        <p:column>
                                            <h:outputText value="#{msg.obj_medicoEspecialidad}"/>
                                        </p:column>
                                        <p:column>
                                            <p:inputText id="especialidad" value="#{RegistrarController.medicoCreate.especialidad}" style="margin: 5px;" styleClass="form-control"
                                                         placeholder="#{msg.obj_medicoEspecialidad}"
                                                         onfocus="document.getElementById('messageForEspecialidad').style.display = 'block';"
                                                         onblur="document.getElementById('messageForEspecialidad').style.display = 'none';"
                                                         validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                                <f:validateRegex pattern="[A-Za-z]+"/>
                                            </p:inputText>
                                        </p:column>
                                        <p:column>
                                            <p:message for="especialidad"/>
                                            <div id="messageForEspecialidad" class="message-validation-div">
                                                <h:outputText value="#{msg.gr_datos_letras}"></h:outputText>
                                            </div>
                                        </p:column>
                                    </p:row>
                                    <p:row>
                                        <p:column>
                                            <h:outputText value="#{msg.obj_medicoCedula}"/>
                                        </p:column>
                                        <p:column>
                                            <p:inputText id="cedula" value="#{RegistrarController.medicoCreate.cedula}" style="margin: 5px;" styleClass="form-control"
                                                         placeholder="#{msg.obj_medicoCedula}"
                                                         onfocus="document.getElementById('messageForCedula').style.display = 'block';"
                                                         onblur="document.getElementById('messageForCedula').style.display = 'none';"
                                                         validatorMessage="#{msg.vld_valorNoPermitido}" requiredMessage="#{msg.vld_campoNecesario}" required="true">
                                                <f:validateRegex pattern="[A-Za-z0-9]+"/>
                                            </p:inputText>
                                        </p:column>
                                        <p:column>
                                            <p:message for="cedula"/>
                                            <div id="messageForCedula" class="message-validation-div">
                                                <h:outputText value="#{msg.gr_datos_cedula}"></h:outputText>
                                            </div>
                                        </p:column>
                                    </p:row>
                                </p:panelGrid>
                            </div>
                            <div class="panel-footer">
                                <center>
                                    <p:commandButton value="#{msg.grn_botonAgregar}" update="formRegistro" styleClass="ui-button-custome"
                                                     onstart="PF('statusDlg').show();" onsuccess="PF('statusDlg').hide();"
                                                     actionListener="#{RegistrarController.executeRegistrarUsuario}"/>
                                    <p:commandButton id="cBLimpiar" value="#{msg.grn_botonLimpiar}"  styleClass="ui-button-custome" 
                                                     actionListener="#{RegistrarController.executeLimpiarObejects}">
                                        <p:ajax update=":formRegistro " resetValues="true" />  
                                    </p:commandButton>
                                </center>
                            </div>
                        </div>
                    </div>
                </div>
            </h:form>
        </ui:define>
    </ui:composition>

</html>

